<template>
  <el-main>
    <section class="real-app">
      <input
        type="text"
        class="add-input"
        autofocus="autofocus"
        placeholder="输入要做的任务"
        @keyup.enter="addTodo"
      >
    </section>
    <ul>
      <Item
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @del="deleteTodo"/>
    </ul>
  </el-main>
</template>

<script>
import Item from './item.vue'

let id = 0
export default {
  components: {
    Item
  },
  name: 'Todo',
  data () {
    return {
      todos: []
    }
  },
  methods: {
    addTodo (e) {
      if (e.target.value.trim() === '') {
        return
      }
      let date = new Date()
      this.todos.unshift({
        id: id++,
        content: e.target.value.trim(),
        completed: false,
        date: date.getMonth() + '-' + date.getDate()
      })
      e.target.value = ''
    },
    deleteTodo (id) {
      this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
    },
    complete (id) {
      this.todos.findIndex(todo => todo.id === id).completed = true
    }
  }
}
</script>

<style scoped>
.real-app {
  margin: 0 auto;
}
.add-input {
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  border-radius: 2em;
  outline: none;
  border: 1px solid #999;
  box-sizing: border-box;
  padding: 16px 16px 16px 60px;
}
ul {
  padding-inline-start: 0px;
}
</style>
